<template>
  <div class="contanier">
    <!-- <div class="contanier-title">考试管理</div> -->
    <search-form>
      <template v-slot:formLeft>
        <el-form :inline="true" :model="userFormLine" class="demo-form-inline">
          <el-row>
            <el-col :span="14">
              <div class="grid-content bg-purple">
                <el-form-item label="时间周期选择" label-width="100px">
                  <el-date-picker
                    v-model="userFormLine.startDatetime"
                    type="datetimerange"
                    value-format="timestamp"
                    format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions"
                    :default-time="['08:00:00', '24:00:00']"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                   >
                  </el-date-picker>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple-light">
                <el-form-item label="考试名称" label-width="80px">
                  <el-select
                    v-model="userFormLine.subjectId"
                    name="subjectId"
                    clearable
                    filterable
                    style="width: 100%;"
                    placeholder="请选择考试名称"
                    @change="changeSubject"
                  >
                    <el-option v-for="(item, index) in subjectList" :key="index" :label="item.fullName" :value="item.id" />
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <div class="grid-content bg-purple">
                <el-form-item label="省市县名称">
                  <!-- <Address
                    v-model="userFormLine.provinceId"
                    placeholder="请选择"
                    clearable
                    :level="1"
                    :multiple="true"
                  /> -->
                  <!-- <el-select
                    v-model="userFormLine.provinceId"
                    name="provinceId"
                    clearable
                    filterable
                    style="width: 100%;"
                    placeholder="请选择省份"
                  >
                    <el-option v-for="(item, index) in provinceList" :key="index" :label="item.fullName" :value="item.id" />
                  </el-select> -->
                  <el-cascader
                    v-model="userFormLine.provinceIdList"
                    :props="cascaderProps"
                    clearable
                  />
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template v-slot:formRight>
        <div class="formRight-btn">
          <el-button icon="el-icon-refresh" class="overPosBtn" @click="onReset">重 置</el-button>
          <el-button
            type="primary"
            @click="onSubmit"
            icon="el-icon-search"
            class="set-col-btn"
            >查 询</el-button
          >
        </div>
      </template>
    </search-form>
    <div>
      <search-table :title="title">
        <template v-slot:daochu>
          <div class="set-table-right" style="float: right" @click="exportExamClick">
            <el-button icon="el-icon-my-message">导 出</el-button>
          </div>
        </template>
        <template v-slot:biaoge>
          <template>
            <el-table
              ref="multipleTable"
              :page="false"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              class="table-top"
              :header-cell-style="{
                backgroundColor: '#f5f7fa',
                color: '#606266',
              }"
            >
              <el-table-column prop="fullName" label="省市县名称" width="230">
              </el-table-column>
              <el-table-column prop="name" label="考试名称">
              </el-table-column>
              <el-table-column prop="participantNumber" label="参加人数" width="230"> </el-table-column>
              <el-table-column prop="completeNumber" label="通过人数" width="230"> </el-table-column>
              <el-table-column prop="participantScore" label="通过平均分" width="230">
                <template #default="{ row }">
                  {{ row.participantScore != null ? parseFloat(row.participantScore).toFixed(2) : '0.00' }}
                </template>
              </el-table-column>
              <el-table-column prop="maxScore" label="最高分" width="230"> </el-table-column>
              <el-table-column prop="minScore" label="最低分" width="230"> </el-table-column>
            </el-table>
          </template>
        </template>
        <!-- <template v-slot:fenye>
          <div class="set-table-pg-right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </template> -->
      </search-table>
    </div>
  </div>
</template>
<script>
import define from "@/utils/define";
import SearchForm from "@/components/search-form";
import SearchTable from "@/components/search-table";
import {
  getProvinceList
} from "@/api/system/province";
import { myExamListNew } from "@/api/exam";
// import { getMySubjectList } from "@/api/exam";
// import { getZTlist } from '@/api/dataCenter/dataCenterApi'
import { getProvinceSubjectData, exportExam } from '@/api/tems/dataTableMangement'
export default {
  name: "UserManagement",
  components: {
    SearchForm,
    SearchTable,
  },
  data() {
    return {
      title: "各省市县培训考试人数统计",
      tableData: [],
      provinceList: [],
      subjectList: [],
      subjectObj: {},
      subjectName: "",
      userFormLine: {
        startDatetime: [],   // 时间周期选择
        keyword: "",         // 专题名称
        subjectId: "",       // 专题id
        provinceIdList: ['32'],   // 省市县IDs
        provinceId: "",      // 省市县ID
        provinceName: "",    //	省市县名称
        // menuId: "",
        // sidx: "",
        // sort: "",
        // subjectId: ""
      },
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      total: 40,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      cascaderProps: {
        checkStrictly: true,
        lazy: true,
        lazyLoad (node, resolve) {
          const { value } = node;
          getProvinceList(value ? value : -1).then(res => {
            const nodes = res.data.list.map(item => ({
                value: item.id,
                label: item.fullName,
                leaf: item.isLeaf
              }));
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          })
        }
      }
    };
  },
  created() {
    // // 加载我的专题列表
    // getZTlist({pageSize: 10000}).then(res => {
    //   res.data.list.forEach(item => {
    //     this.subjectObj[item.id] = item.name;
    //   });
    //   this.subjectList = res.data.list;
    //   this.userFormLine.subjectId = this.subjectList[0].id;
    //   this.subjectName = this.subjectList[0].name;
    //   // 加载其他的数据
    //   this.initData(true);
    // });

    // 加载我的考试列表
    myExamListNew({
      categoryId: 4,
      // enabledMark: 0,
      currentPage: this.currentPage,
      pageSize: 10000
    }).then(res => {
      res.data.list.forEach(item => {
        this.subjectObj[item.id] = item.name;
      });
      this.subjectList = res.data.list.filter(item => item.categoryId == '4');
      if (this.subjectList.length > 0) {
        this.userFormLine.subjectId = this.subjectList[0].id;
        this.subjectName = this.subjectList[0].name;
      }
      // 加载其他的数据
      this.initData(true);
    })

    // getProvinceList(-1).then(res => {
    //   this.provinceList = res.data.list;
    //   // this.userFormLine.provinceId = this.provinceList[0].id;
    //   this.userFormLine.provinceId = '32';
    //   // 加载数据
    //   this.initData(true);
    // })
  },
  methods: {
    async exportExamClick() {
      let data = {
        ...this.userFormLine,
        currentPage: this.currentPage,
        pageSize: 10000,
      };
      let params = 'selectKey=fullName,name,participantNumber,completeNumber,participantScore,maxScore,minScore&dataType=0';
      let res = await exportExam(params,data);
      if (res.code === 200) {
        this.jsbos.downloadFile(res.data.url);
      }
    },
    changeSubject() {
      if (!this.userFormLine.subjectId) {
        this.subjectName = "";
        return;
      }
      this.subjectName = this.subjectObj[this.userFormLine.subjectId];
    },
    onReset() {
      this.userFormLine = {
        startDatetime: [],
        keyword: "",
        provinceIdList: [],
        provinceId: "",
        provinceName: "",
      };
      this.currentPage = 1;
      this.tableData = [];
      this.initData();
    },
    onSubmit() {
      this.initData();
    },
    async initData(initState) {
      if (!this.userFormLine.subjectId) {
        if (!initState) {
          this.$message.error('请先选择考试');
        }
        return;
      }
      if (this.userFormLine.provinceIdList.length == 0) {
        this.$message.error('请先选择省份');
        return;
      }
      this.userFormLine.provinceId = this.userFormLine.provinceIdList[this.userFormLine.provinceIdList.length - 1];
      if (!this.userFormLine.provinceId) {
        if (!initState) {
          this.$message.error('请先选择省份');
        }
        return;
      }
      const params = {
        ...this.userFormLine,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
      let res = await getProvinceSubjectData(params);
      if (res.code === 200) {
        res.data.list.forEach(item => {
          item.subjectName = this.subjectName;
        });
        this.tableData = res.data.list;
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-icon-my-message {
  background: url("../../../../assets/images/dc.png") no-repeat;
  width: 20px;
  height: 20px;
}

::v-deep .el-icon-my-message:before {
  content: "替";
  font-size: 20px;
  visibility: hidden;
}

::v-deep .el-icon-my-message {
  font-size: 18px;
}

::v-deep .el-icon-my-message:before {
  content: "\e611";
}
</style>
